<template>
    <div class="card" :style="{marginTop}">
        <div class="card__time">{{ date }}</div>
        <div class="card__content">
            <div class="card__title">{{ title }}</div>
            <div class="card__replay">{{ content }}</div>
        </div>
    </div>
</template>
<script setup>
const props = defineProps({
    date: String,
    title: String,
    content: String,
    marginTop: {
        type: String,
        default: '20px'
    }
})
</script>
<style lang="scss" scoped>
.card {
    &__time {
        text-align: center;
        font-size: 12px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #B9BDBD;
        line-height: 17px;
        margin-bottom: 14px;
    }

    &__content {
        padding: 16px;
        background: #FFFFFF;
        border-radius: 4px;
    }

    &__title {
        font-size: 16px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #272B2D;
        line-height: 22px;
    }

    &__replay {
        margin-top: 8px;
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        text-align: justify;
        font-weight: 400;
        color: #676B6B;
        line-height: 20px;
    }
}
</style>